<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Guess that chord!™</title>

        <style type="text/css">

            html {
                font-family: "courier new","lucida console";
                background-color: #bada95;
            }

            p {
                font-size: 0.9em;
            }

            h2 {
                font-size: 1.2em;
            }


            #wrapper {
                width: 44em;
                margin: 0 auto;
                height: 34em;
                /* border: 1px solid black; */
                height: 36em;
            }

            #contentWrapper {
                width: 44em;
                margin: 0 auto;
                border: 1px solid black;
                height: 32em;
                background-color: white;
            }

            #content {
                /* border: 1px solid red; */
                float: left;
                width: 28em;
                height: 32em;
                clear: left;
            }

            #stats {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 17em;
                clear: right;
                padding: 0.3em;
            }

            #links {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 6em;
                clear: right;
                padding: 0.3em;
            }

            #options {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 6em;
                clear: right;
                padding: 0.3em;
            }

            #button {
                float: left;
                width: 26em;
                clear: left;
                height: 2em;
                margin: 0.5em;
                padding: 0.2em;
            }

            #information {
                float: left;
                /* border: 1px solid yellow; */
                width: 26em;
                clear: left;
                height: 20em;
                margin: 0.5em;
                padding: 0.2em;
            }

            #input {
                float: left;
                width: 26em;
                clear: left;
                height: 2em;
                /* border: 1px solid black; */
                margin: 0.5em;
                padding: 0.2em;
            }

            #answer {
                float: left;
                width: 26em;
                clear: left;
                height: 2em;
                /* border: 1px solid black; */
                margin: 0.5em;
                padding: 0.2em;
            }
            #footer {
                float: left;
                width: 42em;
                clear: left;
                height: 2em;
                /* border: 1px solid black; */
                margin: 0.5em;
                padding: 0.1em;
            }

            #musicIcon {
                width: 10em;
                margin-left: 5em;
            }

            input.answer {
                width: 3em;
            }

        </style>

        <script src="jquery.js" type="text/javascript"></script>
        <script src="soundmanager.js" type="text/javascript"></script>
        <script src="chordquiz.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="contentWrapper">
                <div id="content">
                    <div id="information">
                        <h1>Guess that chord!™</h1>
                        <p>A quiz program for guessing guitar chords. Press the New chord-button, then press the right chord according to what you hear.</p>
                        <p>For practice, please visit the chord playground.</p>
                        <img src="img/music_icon.jpg" alt="Music Icon" id="musicIcon" />
                    </div>

                    <div id="button"> </div>
                    <div id="input"> </div>
                    <div id="answer"></div>
                </div>

                <div id="links"><h2>Links</h2><p><a href="http://saiboten.com/chordplayground/">The Chord Playground</a></p></div>
                <div id="options"> </div>
                <div id="stats"> </div>
                <div id="footer"><p>©saiboten.com - For questions and comments, please visit saiboten.com.</p></div>
            </div>
        </div>


        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-9102904-1");
                pageTracker._trackPageview();
            } catch(err) {}</script>


    </body>



</html>
